<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">购房资料包</text>
  </view>
  <view class="searchWrapper">
    <view class="search">
      <image src="http://xcxtp.njmswl.com/images/search.png" class="searchImg" />
      <input type="text" class="input" placeholder="请输入您要搜索的内容" />
    </view>
  </view>

  <scroll-view
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    @refresherrefresh="OnRefresherRefresh"
    refresher-enabled="true"
    :refresher-triggered="isTriggered"
    scroll-y
  >
    <view
      class="content"
      v-if="!isAccessTokenSet"
      v-for="item in list"
      :key="item.id"
      @click="detail(item.id)"
    >
      <button
        open-type="getPhoneNumber"
        class="contentItem"
        @getphonenumber="onGetphonenumber"
      >
        <view class="leftContent">
          <p class="itemTitle">{{ item.title }}</p>
          <p style="margin-top: 25rpx">
            <span class="date">{{ item.createTime }} </span>
            <image src="http://xcxtp.njmswl.com/images/eyes.png" class="eyes" />
            <span class="visit">{{ item.count }}</span>
          </p>
        </view>
        <view class="rightContent">
          <image src="http://xcxtp.njmswl.com/images/test.png" class="rightImg" />
        </view>
      </button>
    </view>
    <view
      class="content"
      v-else
      v-for="item in list"
      :key="item.id"
      @click="goDetail(item.id)"
    >
      <view class="contentItem">
        <view class="leftContent">
          <p class="itemTitle">{{ item.title }}</p>
          <p style="margin-top: 25rpx">
            <span class="date">{{ item.createTime }} </span>
            <image src="http://xcxtp.njmswl.com/images/eyes.png" class="eyes" />
            <span class="visit">{{ item.count }}</span>
          </p>
        </view>
        <view class="rightContent">
          <image src="http://xcxtp.njmswl.com/images/test.png" class="rightImg" />
        </view>
      </view>
    </view>
    <open-program></open-program>
  </scroll-view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import OpenProgram from "../components/openProgram.vue";
import { computed } from "vue";
import {
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onTabItemTap,
} from "@dcloudio/uni-app";
import { getInformationAPI, getInformationPageAPI } from "@/services/information";
import { getLoginAPI, getSocialLoginAPI } from "@/services/login";
const menu = ref({});
const list = ref([]);
onTabItemTap(() => {
  updateIsAccessTokenSet();
});
const updateIsAccessTokenSet = () => {
  isAccessTokenSet.value = !!uni.getStorageSync("accessToken");
};
// // 登录获取手机号方法 参数：1.code 2.encryptedData 3.iv
const isAccessTokenSet = ref(!!uni.getStorageSync("accessToken"));
const time = ref()
//-------------------token过期---------------------------------------------------------------------------------
function myFunction() {
  time.value = uni.getStorageSync('expiresTime')||0
  // 获取当前系统时间的时间戳
  const currentTimeTimestamp = Date.now()
  // 检查Token是否过期
  if (time.value === 0) {
  } else if (currentTimeTimestamp >= time.value) {
    uni.showToast({
      title: '登录过期，请重新登录！',
      icon: 'none',
      duration: 2000,
      mask: true,
      success: function () {
        // 清理存储
        uni.removeStorageSync('accessToken')
        uni.removeStorageSync('appIdKey')
        uni.removeStorageSync('expiresTime')
      },
    })
  } else {
  }
}
const intervalId = setInterval(myFunction, 1000)

const scene = ref(0)
//----------------------------------------------------------------------
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  const encryptedData = ev.detail.encryptedData
    scene.value = uni.getStorageSync('scene')
  const iv = ev.detail.iv
  const res = await getSocialLoginAPI({
    code: ev.detail.code,
    encryptedData: encryptedData,    
    iv: iv,
    sourceUserId:scene.value
  })
  console.log(res);
  const bearer = "Bearer ";
  uni.setStorageSync("appIdKey", res.data.userId);
  uni.setStorageSync("accessToken", bearer + res.data.accessToken);
  uni.setStorageSync('expiresTime', res.data.expiresTime)
  updateIsAccessTokenSet()
  isAccessTokenSet.value = uni.getStorageSync("accessToken");
  const detail = detailId.value;
  uni.navigateTo({
    url: `/pages/simplePage/informationDetail?id=${detail}`, // 假设detail页面需要id参数
  });
};
const goDetail = (id) => {
  uni.navigateTo({
    url: `/pages/simplePage/informationDetail?id=${id}`, // 假设detail页面需要id参数
  });
};

//下拉刷新-------------------------------------------------------------------------------------
const isTriggered = ref(false);
const OnRefresherRefresh = async () => {
  isTriggered.value = true;
  await Promise.all([getInformationPage()]);
  isTriggered.value = false;
};
//---------------------------------------------------------------
onMounted(() => {
  menu.value = uni.getMenuButtonBoundingClientRect();
  console.log(menu.value);
});

// 滚动触底 加载更多
const onScrolltolower = () => {
  console.log("到底了");
  getInformationPage();
};
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index'  // 这里的url是你首页的路径，根据你的项目实际情况进行修改
});
};
const detailId = ref();
const detail = (id) => {
  detailId.value = id;
};
// 资料包数据请求
const getInformationList = async () => {
  const res = await getInformationAPI({ id: 1024 });
  console.log(res);
};
//1.分页参数
const pageParams = {
  pageNo: 1,
  pageSize: 5,
};
//2. 分页已结束标记
const finish = ref(false);
//资料包分页数据请求
const getInformationPage = async () => {
  // 数据加载完，退出继续追加分页数据
  if (finish.value === true) {
    return uni.showToast({
      icon: "none",
      title: "没有更多数据了~",
    });
  }
  const res = await getInformationPageAPI(pageParams);
  list.value.push(...res.data.list);
  if (pageParams.pageNo < res.data.total / pageParams.pageSize) {
    pageParams.pageNo++;
  } else {
    finish.value = true;
  }
};
onLoad(() => {
  getInformationList();
  getInformationPage();
});
//uniapp微信小程序分享页面到微信好友
onShareAppMessage(()=>{

})
//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(()=>{

})
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  padding-top: 30rpx;
  background-color: #f3f5fa;
  flex: 1;
}

.navbar {
  padding-left: 28rpx;
  padding-right: 37rpx;
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  display: flex;
  align-items: center;
  .goBack {
    width: 18rpx;
    margin-left: 28rpx;
    height: 30rpx;
    margin-top: 7rpx;
  }

  .title {
    margin:0 auto;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}
.searchWrapper {
  background-color: #fff;
  padding-top: 36rpx;
}
.search {
  display: flex;
  align-items: center;
  width: 695rpx;
  height: 70rpx;
  background: #f3f5fa;
  border-radius: 35rpx;
  margin-left: 27rpx;
  margin-bottom: 30rpx;

  .searchImg {
    width: 28rpx;
    height: 28rpx;
    margin-left: 25rpx;
    margin-right: 8rpx;
  }

  .input {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
  }
}

.content {
  width: 100%;
  height: auto;
  background-color: #f4f5fc;

  .contentItem {
    display: flex;
    align-items: center;
    padding-left: 27rpx;
    width: 695rpx;
    height: 230rpx;
    background: #ffffff;
    border-radius: 20rpx;
    border: 1px solid #eeeeee;
    margin-bottom: 19rpx;
    margin-left: 27rpx;

    .leftContent {
      float: left;
      width: 367rpx;
      margin-right: 60rpx;

      .eyes {
        width: 23rpx;
        height: 17rpx;
      }

      .date,
      .visit {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #687a8c;
      }

      .date {
        margin-right: 37rpx;
      }

      .itemTitle {
        font-family: PingFang SC;
        font-weight: 550;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .rightContent {
      float: right;

      .rightImg {
        width: 220rpx;
        height: 140rpx;
      }
    }
  }
}
</style>
